<template>
    <div class="xc-container" v-resizeob="resizeEcharts">
        <div class="left">
            <cards class="left-one" title="覆盖范围">
                <div id="echarts_1" class="pro-charts"></div>
            </cards>
            <cards class="left-two" title="产品占比">
                <div id="echarts_2" class="pro-charts"></div>
            </cards>
            <cards class="left-three" title="各区县产品情况">
                <div id="echarts_3" class="pro-charts"></div>
            </cards>
        </div>
        <div class="center">
            <div class="maps-box" ref="map"></div>
        </div>
        <div class="right">
            <cards class="right-one" title="厂商供货情况">
                <div id="echarts_4" class="pro-charts"></div>
            </cards>
            <cards class="right-two" title="交付设备趋势">
                <div id="echarts_5" class="pro-charts"></div>
            </cards>
            <cards class="right-three" title="各单位设备情况">
                <div id="echarts_6" class="pro-charts"></div>
            </cards>
        </div>
    </div>
</template>

<script>
import changzhi from "@/json/changzhi.json"
import * as echarts from 'echarts';
let chartLabelBg = require('../../assets/screen/pos.png')
export default {
    data() {
        return {
            mapChart: null,
            mapData: [
                {
                    name: '沁原县'
                },
                {
                    name: '沁县'
                },
                {
                    name: '武乡县'
                },
                {
                    name: '黎城县'
                },
                {
                    name: '襄垣县'
                },
                {
                    name: '屯留区'
                },
                {
                    name: '潞城区'
                },
                {
                    name: '潞州区'
                },
                {
                    name: '上党区'
                },
                {
                    name: '长子县'
                },
                {
                    name: '壶关县'
                },
                {
                    name: '平顺县'
                }
            ],
        };
    },
    mounted() {
        this.$nextTick(() => {
            this.getMap()
        })
        // 覆盖范围
        this.myChart1 = echarts.init(document.getElementById("echarts_1"));
        var option1 = {
            legend: {
                top: 'bottom',
                textStyle: {
                    color: '#f2f2f2',
                    fontWeight: 'normal'
                }
            },
            series: [
                {
                    type: 'pie',
                    radius: ['40%', '70%'],
                    center: ['50%', '40%'],
                    roseType: 'area',
                    padAngle: 2,
                    data: [
                        {
                            value: 38, name: '公安',
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(1, 1, 1, 0,
                                    [
                                        { offset: 0, color: 'rgba(82, 172, 255, 0.2)' },
                                        { offset: 1, color: 'rgba(82, 172, 255, 1)' },
                                    ]
                                )
                            },
                            label: {
                                color: '#3d94f1'
                            }

                        },
                        {
                            value: 34, name: '教育',
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(1, 1, 1, 0,
                                    [
                                        { offset: 0, color: 'rgba(118, 225, 255, 0.2)' },
                                        { offset: 1, color: 'rgba(118, 225, 255, 1)' },
                                    ]
                                )
                            },
                            label: {
                                color: '#6cd3dd'
                            }
                        },
                        {
                            value: 26, name: '政府',
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(1, 1, 1, 0,
                                    [
                                        { offset: 0, color: 'rgba(22, 77, 107, 0.2)' },
                                        { offset: 1, color: 'rgba(53, 196, 220, 1)' },
                                    ]
                                )
                            },
                            label: {
                                color: '#2da9c7'
                            }
                        },
                    ]
                }
            ]
        };
        option1 && this.myChart1.setOption(option1);

        // 产品占比
        this.myChart2 = echarts.init(document.getElementById("echarts_2"));
        var option2 = {
            legend: {
                top: 'bottom',
                textStyle: {
                    color: '#f2f2f2',
                    fontWeight: 'normal'
                }
            },
            series: [
                {
                    type: 'pie',
                    radius: ['40%', '70%'],
                    center: ['50%', '40%'],
                    roseType: 'area',
                    padAngle: 2,
                    grid: {
                        top: "0", // 一下数值可为百分比也可为具体像素值
                        right: "5%",
                        bottom: "25%",
                        left: "8%",
                    },
                    data: [
                        {
                            value: 38, name: '微型计算机',
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(1, 1, 1, 0,
                                    [
                                        { offset: 0, color: 'rgba(82, 172, 255, 0.2)' },
                                        { offset: 1, color: 'rgba(82, 172, 255, 1)' },
                                    ]
                                )
                            },
                            label: {
                                color: '#3d94f1'
                            }
                        },
                        {
                            value: 34, name: '台式计算机',
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(1, 1, 1, 0,
                                    [
                                        { offset: 0, color: 'rgba(29, 116, 91, 0.2)' },
                                        { offset: 1, color: 'rgba(42, 202, 140, 1)' },
                                    ]
                                )
                            },
                            label: {
                                color: '#22a579'
                            }
                        },
                        {
                            value: 26, name: '同方台式计算机',
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(1, 1, 1, 0,
                                    [
                                        { offset: 0, color: 'rgba(22, 77, 107, 0.2)' },
                                        { offset: 1, color: 'rgba(53, 196, 220, 1)' },
                                    ]
                                )
                            },
                            label: {
                                color: '#2da9c7'
                            }
                        },
                    ]
                }
            ]
        };
        option2 && this.myChart2.setOption(option2);

        // 各区县展示情况
        // 左三柱状图
        this.myChart3 = echarts.init(document.getElementById("echarts_3"));
        // const rawData = [
        //     [1, 3, 3, 3, 3, 3, 3, 1, 1, 2, 1, 2],
        //     [3, 1, 1, 1, 7, 2, 2, 2, 3, 4, 1, 2],
        //     [2, 1, 1, 2, 2, 3, 3, 3, 4, 5, 2, 1],
        // ];
        // const grid = {
        //     right: 40,
        //     top: 50,
        //     bottom: 50
        // };
        // const totalData = [];
        // for (let i = 0; i < rawData[0].length; ++i) {
        //     let sum = 0;
        //     for (let j = 0; j < rawData.length; ++j) {
        //         sum += rawData[j][i];
        //     }
        //     totalData.push(sum);
        // }
        // const series = [
        //     '微型计算机',
        //     '台式计算机',
        //     '同方台式计算机',
        // ].map((name, sid) => {
        //     return {
        //         name,
        //         type: 'bar',
        //         stack: 'total',
        //         barWidth: '50%',
        //         label: {
        //             show: true,
        //             color: '#fff',
        //             formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
        //         },
        //         data: rawData[sid].map((d, did) =>
        //             totalData[did] <= 0 ? 0 : d / totalData[did]
        //         ),
        //     };
        // });
        // var option3 = {
        //     grid,
        //     legend: {
        //         top: 'bottom',
        //         textStyle: {
        //             color: '#f2f2f2',
        //             fontWeight: 'normal'
        //         }
        //     },
        //     yAxis: {
        //         type: 'value',
        //         splitLine: {
        //             lineStyle: {
        //                 type: 'dashed',
        //                 color: '#243e5d'
        //             }
        //         },
        //     },
        //     xAxis: {
        //         type: 'category',
        //         data: ['武乡', '沁县', '沁源', '屯留区', '襄垣', '黎城', '潞城区', '潞州区', '长子', '上党区', '壶关', '平顺']
        //     },
        //     series
        // };
        var option3 = {
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "cross",
                    crossStyle: {
                        color: "#999",
                    },
                },
            },
            grid: {
                show: false, //是否显示直角坐标系网格
                top: "15%", // 一下数值可为百分比也可为具体像素值
                right: "5%",
                bottom: "25%",
                left: "8%",
            },
            legend: {
                top: 'bottom', // 控制 板块控制器的位置
                // icon: 'rect',//形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
                // itemWidth: 10,  // 设置宽度
                // itemHeight: 4, // 设置高度
                // itemGap: 10, // 设置顶部图标间距
                // right: "center",
                data: [
                    {
                        name: "微型计算机",
                        textStyle: {
                            color: "#fff", // 单独设置某一个图列的颜色
                        },
                    },
                    {
                        name: "台式计算机",
                        textStyle: {
                            color: "#fff", // 单独设置某一个图列的颜色
                        },
                    },
                    {
                        name: "同方台式计算机",
                        textStyle: {
                            color: "#fff", // 单独设置某一个图列的颜色
                        },
                    },
                ],
            },
            xAxis: [
                {
                    type: "category",
                    data:
                        ['武乡', '沁县', '沁源', '屯留区', '襄垣', '黎城', '潞城区', '潞州区', '长子', '上党区', '壶关', '平顺']
                    ,
                    axisPointer: {
                        type: "shadow",
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#243e5d",
                        },
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#969a9e',
                        },
                    },
                    axisTick: {
                        show: false,
                    }
                },
            ],
            yAxis: [
                {
                    type: "value",
                    axisLabel: {
                        show: true,
                        formatter: "{value}",
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: '#243e5d'
                        }
                    }
                },
            ],
            series: [
                {
                    name: "微型计算机",
                    type: "bar",
                    barWidth: "30%", // 设置柱子的宽度
                    stack: "柱子", //同个类目轴上系列配置相同的stack值可以堆叠放置
                    data: [20, 30, 40, 60, 20, 50, 40, 30, 30, 50, 40, 30],
                    itemStyle: {
                        color: {
                            type: "linear",
                            x: 0, // 右
                            y: 1, // 下
                            x2: 0, // 左
                            y2: 0, // 上
                            colorStops: [
                                {
                                    offset: 0,
                                    color: "#36c6e0", // 0% 处的颜色
                                },
                            ],
                        },
                    },
                },
                {
                    name: "台式计算机",
                    type: "bar",
                    barWidth: "30%", // 设置柱子的宽度
                    stack: "柱子", //同个类目轴上系列配置相同的stack值可以堆叠放置
                    data: [50, 40, 70, 15, 30, 45, 25, 60, 70, 30, 10, 65],
                    itemStyle: {
                        color: {
                            type: "linear",
                            x: 0, // 右
                            y: 1, // 下
                            x2: 0, // 左
                            y2: 0, // 上
                            colorStops: [
                                {
                                    offset: 0,
                                    color: "#2ec688", // 0% 处的颜色
                                },

                            ],
                        },
                    }
                },
                {
                    name: "同方台式计算机",
                    type: "bar",
                    barWidth: "30%", // 设置柱子的宽度
                    stack: "柱子", //同个类目轴上系列配置相同的stack值可以堆叠放置
                    data: [55, 45, 75, 25, 20, 40, 35, 40, 60, 20, 10, 15],
                    itemStyle: {
                        color: {
                            type: "linear",
                            x: 0, // 右
                            y: 1, // 下
                            x2: 0, // 左
                            y2: 0, // 上
                            colorStops: [
                                {
                                    offset: 0,
                                    color: "#2582de", // 0% 处的颜色
                                },
                            ],
                        },
                    }
                },
                {
                    label: {
                        show: true,
                        position: "top",
                        distance: 10,
                        verticalAlign: "middle",
                        textStyle: {
                            // 数值样式
                            color: "#D2CC17",
                            fontSize: 12,
                        },
                    }
                }
            ]
        }
        option3 && this.myChart3.setOption(option3);


        // 厂商供货情况
        this.myChart4 = echarts.init(document.getElementById("echarts_4"));
        var option4 = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                show: false, //是否显示直角坐标系网格
                top: "15%", // 一下数值可为百分比也可为具体像素值
                right: "5%",
                bottom: "25%",
                left: "8%",
            },
            legend: {
                data: ['微型计算机', '台式计算机', '同方台式计算机'],
                top: 'bottom',
                textStyle: {
                    color: '#f2f2f2',
                    fontWeight: 'normal'
                }
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: { show: false },
                    data: ['北方自动控制技术研究所', '同方'],
                    axisLine: {
                        //横轴样式
                        lineStyle: {
                            color: "#243e5d",
                        },
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#969a9e',
                        },
                    },
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: '#243e5d'
                        }
                    }
                }
            ],
            series: [
                {
                    name: '微型计算机',
                    type: 'bar',
                    barWidth: '15%',
                    label: true,
                    emphasis: {
                        focus: 'series'
                    },
                    color: ['#2582de'],
                    data: [3, 2]
                },
                {
                    name: '台式计算机',
                    type: 'bar',
                    label: true,
                    barWidth: '15%',
                    emphasis: {
                        focus: 'series'
                    },
                    color: ['#36c6e0'],
                    data: [2, 2]
                },
                {
                    name: '同方台式计算机',
                    type: 'bar',
                    barWidth: '15%',
                    label: true,
                    emphasis: {
                        focus: 'series'
                    },
                    color: ['#2ec688'],
                    data: [1, 2]
                },
            ]
        };
        option4 && this.myChart4.setOption(option4);

        // 交付设备趋势
        this.myChart5 = echarts.init(document.getElementById("echarts_5"));
        var option5 = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['台式计算机', '微型计算机', '同方台式计算机'],
                top: 'bottom',
                textStyle: {
                    color: '#f2f2f2',
                    fontWeight: 'normal'
                }
            },
            grid: {
                show: false, //是否显示直角坐标系网格
                top: "10%", // 一下数值可为百分比也可为具体像素值
                right: "5%",
                bottom: "25%",
                left: "8%",
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['2020', '2021', '2022', '2023'],
                axisLine: {
                    lineStyle: {
                        color: "#243e5d",
                    },
                },
                axisLabel: {
                    textStyle: {
                        color: '#969a9e',
                    },
                },
                axisTick: {
                    show: false,
                }
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    lineStyle: {
                        type: 'dashed',
                        color: '#243e5d'
                    }
                }

            },
            series: [
                {
                    name: '台式计算机',
                    type: 'line',
                    stack: 'Total',
                    color: ['#2ec688'],
                    data: [12, 13, 10, 13, 70, 23, 21],

                },
                {
                    name: '微型计算机',
                    type: 'line',
                    stack: 'Total',
                    color: ['#6dbff8'],
                    data: [22, 18, 19, 23, 29, 33, 31]
                },
                {
                    name: '同方台式计算机',
                    type: 'line',
                    stack: 'Total',
                    color: ['#3d90e8'],
                    data: [15, 23, 20, 15, 19, 33, 41]
                }
            ]
        };
        option5 && this.myChart5.setOption(option5);

        // 各单位设备情况
        this.myChart6 = echarts.init(document.getElementById("echarts_6"));
        var option6 = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['产品数量'],
                top: 'bottom',
                textStyle: {
                    color: '#f2f2f2',
                    fontWeight: 'normal'
                }
            },
            grid: {
                show: false, //是否显示直角坐标系网格
                top: "10%", // 一下数值可为百分比也可为具体像素值
                bottom: "15%",
                left: "22%",
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01],
                splitLine: {
                    lineStyle: {
                        type: 'dashed',
                        color: '#243e5d'
                    }
                }
            },
            yAxis: {
                type: 'category',
                data: ['长子县第一中学', '壶关县第一中学', '襄垣一中', '长子县第一中学', '沁县第一中学', '长治市第一小学'],
                axisLine: {
                    lineStyle: {
                        color: "#243e5d",
                    },
                },
                axisLabel: {
                    textStyle: {
                        color: '#969a9e',
                    },
                },
                axisTick: {
                    show: false,
                }
            },
            series: [
                {
                    name: '2011',
                    type: 'bar',
                    data: [4, 3, 1, 3, 4, 4, 5],
                    color: '#3d90e8'
                },
            ]
        };
        option6 && this.myChart6.setOption(option6);
    },
    methods: {
        getMap() {
            this.mapChart = this.$echarts.init(this.$refs.map, null, { devicePixelRatio: 4 });
            this.$echarts.registerMap("changzhi", changzhi);
            let mapOptions = {
                geo3D: {
                    // top: -80,
                    map: "changzhi", //注册地图的名字
                    roam: true, //开启鼠标缩放和平移漫游。默认不开启
                    // boxHeight: 20,
                    tooltip: {
                        show: true,
                        trigger: "axis",
                    },
                    itemStyle: {
                        color: "#1d3971", // 背景
                        opacity: 0.4, //透明度
                        borderColor: "#5698dc",
                        borderWidth: 2.5,
                        shadowColor: "#204077",
                        shadowOffsetX: 20,
                        shadowOffsetY: 20,
                        shadowBlur: 300,
                    },
                    label: {
                        show: true,
                        distance: 0,
                        color: '#fff',
                        padding: [6, 4, 2, 4],
                        fontSize: 18,
                        textBorderColor: 'rgba(30, 128, 192, 1)',
                        textBorderWidth: 1,
                        textShadowBlur: 2,
                        textShadowColor: 'rgba(86, 126, 155, 1)',
                        formatter: (data) => {
                            return `${data.name}\n{cIcon|}`
                        },
                        rich: {
                            cIcon: {
                                width: 30,
                                height: 23,
                                align: 'center',
                                backgroundColor: {
                                    image: chartLabelBg,
                                    opacity: 0.1
                                },
                            },
                        }
                    },
                    //当鼠标放上去  地区区域是否显示名称
                    emphasis: {
                        label: {
                            show: true,
                            textStyle: {
                                color: "#ffffff",
                                fontSize: 4,
                            },
                        },
                        itemStyle: {
                            borderColor: "#156856",
                            opacity: 0.8
                        }
                    },
                    shading: "realistic",
                    //光照阴影
                    light: {
                        //光照阴影
                        main: {
                            color: "#fff", //光照颜色
                            intensity: 1.2, //光照强度
                            shadowQuality: 'high', //阴影亮度
                            shadow: true, //是否显示阴影
                            alpha: 20,
                            beta: 50,
                        },
                        ambient: {
                            color: '#66b2f9',
                            intensity: 1,
                        },
                    },
                    //用于鼠标控制地图旋转等功能
                    viewControl: {
                        // 用于鼠标的旋转，缩放等视角控制。
                        projection: "perspective", // 投影方式，默认为透视投影'perspective'，也支持设置为正交投影'orthographic'。
                        autoRotate: false, // 是否开启视角绕物体的自动旋转查看。[ default: false ]
                        autoRotateDirection: "cw", // 物体自传的方向。默认是 'cw' 也就是从上往下看是顺时针方向，也可以取 'ccw'，既从上往下看为逆时针方向。
                        autoRotateSpeed: 10, // 物体自传的速度。单位为角度 / 秒，默认为10 ，也就是36秒转一圈。
                        autoRotateAfterStill: 3, // 在鼠标静止操作后恢复自动旋转的时间间隔。在开启 autoRotate 后有效。[ default: 3 ]
                        damping: 0, // 鼠标进行旋转，缩放等操作时的迟滞因子，在大于等于 1 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。[ default: 0.8 ]
                        rotateSensitivity: 2, // 旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。默认为1, 设置为0后无法旋转。   rotateSensitivity: [1, 0]——只能横向旋转； rotateSensitivity: [0, 1]——只能纵向旋转。
                        zoomSensitivity: 5, // 缩放操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法缩放。
                        panSensitivity: 5, // 平移操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法平移。支持使用数组分别设置横向和纵向的平移灵敏度
                        panMouseButton: "left", // 平移操作使用的鼠标按键，支持：'left' 鼠标左键（默认）;'middle' 鼠标中键 ;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
                        rotateMouseButton: "left", // 旋转操作使用的鼠标按键，支持：'left' 鼠标左键;'middle' 鼠标中键（默认）;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)

                        distance: 145, // [ default: 100 ] 默认视角距离主体的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离,对于 globe 来说是距离地球表面的距离。在 projection 为'perspective'的时候有效。
                        minDistance: 40, // [ default: 40 ] 视角通过鼠标控制能拉近到主体的最小距离。在 projection 为'perspective'的时候有效。
                        maxDistance: 400, // [ default: 400 ] 视角通过鼠标控制能拉远到主体的最大距离。在 projection 为'perspective'的时候有效。

                        alpha: 50, // 视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。[ default: 40 ]
                        beta: 60, // 视角绕 y 轴，即左右旋转的角度。[ default: 0 ]
                        minAlpha: -5, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
                        maxAlpha: 90, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
                        minBeta: -80, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
                        maxBeta: 80, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]

                        center: [0, -20, 0], // 视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。左右 上下 前后

                        animation: true, // 是否开启动画。[ default: true ]
                        animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
                        animationEasingUpdate: "cubicInOut", // 过渡动画的缓动效果。[ default: cubicInOut ]
                    },
                    //修改选中区域的样式
                    regions: [
                    ],
                    silent: false,
                    regionHeight: 5, //修改整个地图的三维高度
                    data: this.mapData
                },
            }
            this.mapChart.setOption(mapOptions);
        },
        resizeEcharts() {
            this.mapChart.resize()
            this.myChart1.resize()
            this.myChart2.resize()
            this.myChart3.resize()
            this.myChart4.resize()
            this.myChart5.resize()
            this.myChart6.resize()
        },
    }
};
</script>

<style lang='less' scoped>
.xc-container {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    gap: 10px;
}

.xc-container .left {
    width: 29%;
    height: 100%;
    display: flex;
    gap: 1.6%;
    flex-direction: column;

    .left-one,
    .left-two,
    .left-three {
        width: 100%;
        height: 32%;
    }
}

.xc-container .center {
    width: 40%;
    height: 100%;
    // background: #bfa;
}

.maps-box {
    width: 100%;
    height: 100%;
}

.xc-container .right {
    width: 29%;
    height: 100%;
    // background: #baf;
    display: flex;
    flex-direction: column;
    gap: 1.6%;

    .right-one,
    .right-two,
    .right-three {
        width: 100%;
        height: 32%;
    }
}

.pro-charts {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-bottom: 5px;
}
</style>